<template>
  <div class="template">
    <a-base-table
      ref="baseTable"
      :columns="columns"
      :selections="selections"
      :options="tableOptions"
      :api="{
        url: getTableDataApi,
        params: searchParams,
      }"
      @handleSelectChange="handleSelectChange"
    >
      <template #tableSearch>
        <a-row :gutter="10">
          <a-col :span="4">
            <a-input
              v-model:value="searchParams.name"
              :placeholder="$t('form.userName')"
            />
          </a-col>
          <a-col :span="4">
            <a-input
              v-model:value="searchParams.age"
              :placeholder="$t('form.age')"
            />
          </a-col>
          <a-col :span="4">
            <a-range-picker
              v-model:value="searchParams.date"
              :format="dateFormat"
            />
          </a-col>
          <a-col :span="2">
            <a-button key="submit" type="primary" @click="handleSearch">
              <template #icon>
                <antd-icon name="SearchOutlined"></antd-icon>
              </template>
              {{ $t("form.search") }}
            </a-button>
          </a-col>
        </a-row>
      </template>
      <template #action="{ record, index }">
        <a-button
          type="primary"
          size="small"
          ghost
          @click="handleEdit(record, index)"
        >
          编辑
        </a-button>
        <a-popconfirm
          title="Are you sure delete this task?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="handleDelete(record, index)"
        >
          <a-button type="danger" size="small" ghost> 删除 </a-button>
        </a-popconfirm>
      </template>
      <template #customCss="{ record }">
        <span class="primary_color">{{ record.name }}</span>
      </template>
    </a-base-table>
  </div>
</template>

<script lang="ts">
import ABaseTable from "@/components/Table/baseIndex.vue";
import {
  defineComponent,
  reactive,
  ref,
  unref,
  getCurrentInstance,
  computed,
  toRef,
} from "vue";
import { getTableDataApi } from "@/api/table";
import ABaseModal from "@/components/Modal/baseIndex.vue";
import { antdModalInfo, antdModalConfirm } from "@/components/Modal/index";

export default defineComponent({
  name: "TablePage",
  props: {},
  components: {
    ABaseTable,
    ABaseModal,
  },
  setup(props) {
    const proxy = getCurrentInstance()?.proxy;
    
    // 搜索
    const dateFormat = ["YYYY/MM/DD", "YYYY/MM/DD"];
    const searchParams = reactive({
      name: "",
      age: "",
      date: [],
    });

    const baseTable = ref();
    const handleSearch = (): void => {
      console.log(proxy?.$utils.$formatReqDate(searchParams.date));
      baseTable.value.handleGetData();
    };
    // 选择
    const handleSelectChange = ({
      keys,
      rows,
    }: {
      keys: any[];
      rows: any[];
    }): void => {
      console.log(keys, rows)
    };
    // 编辑 删除
    const handleEdit = (record: any, inx: number): void => {
      console.log(inx, record);
      antdModalConfirm({ content: record.name })
        .then(() => {
          console.log("ok!");
        })
        .catch(() => {
          console.log("cancel!");
        });
    };
    const handleDelete = (record: any, inx: number): void => {
      antdModalInfo({ type: "success", title: "Success!" }).then(() => {
        console.log("ok!");
      });
      console.log(inx, record);
    };
    // 配置
    const tableOptions = {
      $slotsName: ["action", "customCss"], // 插槽名称
    };
    const selections = {
      fixed: true,
      type: "checkbox",
      selectedRowKeys: [1, 2, 3],
    };
    const columns = [
      {
        title: "操作",
        dataIndex: "",
        slots: { customRender: "action" },
        width: "200px",
      },
      {
        dataIndex: "name",
        title: "姓名",
        slots: { customRender: "customCss" },
      },
      {
        dataIndex: "age",
        title: "年龄",
        sorter: (a: any, b: any) => a.age - b.age,
      },
      { dataIndex: "sex", title: "性别" },
      {
        dataIndex: "tags",
        title: "标签",
        slots: { customRender: "tags" },
      },
      {
        dataIndex: "birthday",
        title: "生日",
        sorter: (a: any, b: any) =>
          new Date(a.birthday).getTime() - new Date(b.birthday).getTime(),
      },
      { dataIndex: "city", title: "城市" },
    ];

    return {
      searchParams,
      tableOptions,
      selections,
      columns,
      getTableDataApi,
      handleSearch,
      handleEdit,
      handleDelete,
      baseTable,
      dateFormat,
      handleSelectChange,
    };
  },
});
</script>